<template>
  <div>
    <page-header-wrapper></page-header-wrapper>
    <a-card style="margin-top: 20px">
      <div class="table-page-search-wrapper">
        <a-form :form="searchForm" layout="inline">
          <a-row :gutter="48">
            <SearchFormItems
              :colMdSm="{span: 11, offset: 1}"
              :searchKeys="MergeSearchKeys"
              :onDateChange="onDateChange"
            >
            </SearchFormItems>
            <a-col :md="12" :sm="12" class="advanced_butns">
              <span
                class="table-page-search-submitButtons"
              >
                <a-button @click="reset">重置</a-button>
                <a-button type="primary" @click="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <div class="cont_box">
      <a-table
        :columns="MergeColumn"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowKey="(it,index) => (it.id+index)"
        :loading="loading"
        @expand="getInnerData"
        :expanded-row-keys.sync="expandedRowKeys"
        binvested
      >
        <div slot="expandedRowRender">
          <a-table
            :columns="MergeInnerColumn"
            :dataSource="innerData"
            :pagination="false"
            :rowKey="(it) => it.id " 
            :loading="innerLoading"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
              getCheckboxProps: record => ({
                props: {
                  disabled: record.merge === 1
                },
              }),
            }"
          ></a-table>
          <div class="flex-end" style="margin-top:20px;">
            <a-button :loading="btnLoading" :disabled="selectedRowKeys.length == 0" type="primary" @click="combineMerge">合并预报</a-button>
          </div>
        </div>
      </a-table>
      <pagination
        :total="total"
        :page.sync="page"
        :size.sync="size"
        :onPageSizeChange="onPageSizeChange"
        :onShowSizeChange="onShowSizeChange"
      />
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { MergeList, MergeListDetail, MergeCombine } from "@/api/prediction";
import { MergeSearchKeys, MergeColumn, MergeInnerColumn } from "./config";
export default {
  name: "PredictionList",
  data() {
    return {
      MergeSearchKeys, MergeColumn,MergeInnerColumn,
      searchForm: this.$form.createForm(this, {
        name: "combine_search",
      }),
      dates:[],
      dataSource: [],
      innerData:[],
      pagination: false,
      page: 1,
      size: 50,
      total: 0,
      loading: false,
      expandedRowKeys:[],
      selectedRowKeys: [],
      btnLoading: false,
      innerParam:{},
      innerLoading:false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search() {
      this.page = 1;
      this.getList();
    },
    reset() {
      this.dates = []
      this.searchForm.resetFields();
      this.page = 1;
      this.getList();
    },
    onDateChange(date, dateString) {
      this.dates = dateString;
    },
    onPageSizeChange(page, size) {
      this.page = page;
      this.getList(page, size);
    },
    onShowSizeChange(page, size) {
        this.page = page;
        this.size = size;
        this.getList(page, size);
    },
    onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys;
    },
    async getInnerData(expanded, {address ='',orderTime=''}){
      if (expanded) { 
        this.innerLoading = true
        let key = this.expandedRowKeys.pop()
        this.expandedRowKeys = []
        this.expandedRowKeys.push(key)
        let param = {
          address,startTime:moment(orderTime).format('YYYY-MM-DD HH:mm:ss'),endTime:moment(orderTime).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        },innerRes = await MergeListDetail(param)
        this.innerParam= param
        console.log('memge detail',innerRes)
        this.innerData = innerRes?.data
        this.innerLoading = false
      }
    },
    async combineMerge(){
      this.btnLoading = true
      let res = await MergeCombine(this.selectedRowKeys)
      console.log(this.selectedRowKeys,res)
      if(res?.success){
        this.$message.success('合并成功')
      }else{
        this.$message.error(res?.message)
      }
      this.innerData = []
      this.selectedRowKeys = []
        let innerRes= await MergeListDetail(this.innerParam)
        this.innerData = innerRes?.data
      this.btnLoading = false
      
    },
    // 获取列表
    async getList(currentPage, currentSize) {
      this.loading = true;
      const { page, size, dates } = this;
      const [begin = "", end = ""] = dates || [];
      this.searchForm.validateFields(async (err, values) => {
        if (!err) {
          delete values.dates;
          let params = {
            pageNum: currentPage || page,
            pageSize: currentSize || size,
            ...values,
            ...{
              startTime:begin !=''?moment(begin).format('YYYY-MM-DD HH:mm:ss'):'',
              endTime: end !=''?moment(end).format('YYYY-MM-DD HH:mm:ss'):'',  
            },
          };
          const res = await MergeList(params);
          if (res?.success) {
            this.total = res?.data?.total || 0;
            this.dataSource = res?.data?.list || [];
          } else {
            this.$message.error(res?.message);
          }
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
   
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ant-calendar-picker {
  width: 400px !important;
}
.desc {
  margin-bottom: 20px;
  .value {
    color: #000;
  }
}
</style>